@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  /* 源码这一块没有指定高度和超出之后隐藏的样式，应该是避免所有卡片都展开会超过一屏的高度就出现看不到的状况吧；
  但是在这一块我发现了一个问题，
  因为我设的背景图片是渐变的，所以它渲染的背景的大小就是由内容撑开的大小，那么当不满一屏的时候，剩下的部分就会重复渲染，造成一个断层，很不好看;
  暂时还没想到一个更好的方式，所以这种背景最好还是使用纯色背景，避免使用图片或者渐变吧
  或者在需求中尽量确定一下内容是否会超过一屏，如果超过就让内容去撑，不超过的话尽量设置一屏的高度吧
  */
  /* height: 100vh; */
  /* overflow: hidden; */
  margin: 0;
  font-family: 'Muli', sans-serif;
  background-image: -moz-linear-gradient(135deg, rgb(255, 240, 153), rgb(168, 255, 216));

  background-image: -webkit-linear-gradient(135deg, rgb(255, 240, 153), rgb(168, 255, 216));

  background-image: linear-gradient(135deg, rgb(255, 240, 153), rgb(168, 255, 216));

  /* 刚开始布局时，上来就flex布局居中，后来发现每次点击卡片，整个内容都会进行位置调整，本来想通过定位改变整个问题，后来才想明白是因为全局居中的原因 */
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}

h1 {
  text-align: center;
}

p {
  margin: 0;
}
/* 我没有给卡片的容器特殊指定大小，由卡片来撑，所以我的容器的宽度是继承的body，为100%*/

.qaCard {
  border: 1px solid;
  border-radius: 5px;
  /* 每个卡片的大小为屏幕宽度的一半 */
  width: 50vw;
  background: #D6ECE0;
  /* 卡片水平居中 */
  margin: 30px auto;
  padding: 20px;
  transition: all 0.4s ease;
  /* 源码指定了 */
  position: relative;
  /* overflow: hidden; */
}

.qaCard.active {
  box-shadow: 0px 4px 8px rgb(0 0 0 / 0.3);
  background-image: -moz-linear-gradient(180deg, rgb(255, 216, 194), rgb(173, 237, 255));

  background-image: -webkit-linear-gradient(180deg, rgb(255, 216, 194), rgb(173, 237, 255));

  background-image: linear-gradient(180deg, rgb(255, 216, 194), rgb(173, 237, 255));
}

/* 原来是通过伪元素加的，我刚开始一直以为是个背景图片呢，不过我加上，显示不出来，也就没有再次尝试了 */
.qaCard.active::before,
.qaCard.active::after {
  content: '\f075';
  font-family: 'Font Awesome 5 Free';
  color: #2ecc71;
  font-size: 7rem;
  position: absolute;
  opacity: 0.2;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.qaCard.active::before {
  color: #3498db;
  top: -10px;
  left: -30px;
  transform: rotateY(180deg);
}

.qaCard .question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

/* 重置按钮样式 */
/* 源码按钮的位置是通过定位来实现的，按钮的小图标是通过显示不显示来控制的
  我是通过改变小图标的类样式实现的
*/
.qaCard button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
}

.qaCard .answer {
  display: none;
  transition: display 0.4s ease;
}

.qaCard.active .answer {
  margin-top: 20px;
  display: block;
}